<%@ Page Language="C#" MasterPageFile="doc.master" Title="HTML--ASPX" %>

<%@ Register TagPrefix="mod" TagName="inline" Src="/Mod/Mod_Inline.ascx" %>

<asp:Content ID="Content1" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1">
    <h1>Bilder</h1>
    <p>
        Die Darstellung von Bildern ist zwar nicht kompliziert. 
        Wenn man aber mehr als ein Paar Bilder zeigen will, kann das auch ziemlich mühsam werden, 
        weil man für jedes Bild wiederkehrende Operationen ausführen muss.
    </p>
    <p>
        Ausgangspunkt ist ein Bild, zum Beispiel von einer Digitalkamera. 
        Egal, um welches Kamera-Fabrikat es sich auch handelt, diese Bilder sind für eine Präsentation im Web ungeeignet.
        Sie sind viel zu groß und hätten eine viel zu große Ladezeit.
        Man muss daher diese Bilder immer verkleinern und zwar auf zwei Formate: 
    </p>
    <ul>
        <li>ein Miniaturbild (thumb, z.B. 200px), das einen Eindruck vermitteln soll und </li>
        <li>ein Vorschaubild (preview, z.B. 600px), das sich öffnet sieht, wenn man auf das Miniaturbild klickt.</li>
    </ul>
    <p>Um die Übersicht in den vielen Bildern nicht zu verlieren, muss man sich um eine gewisse Ordnung in der Benennung und bei der Speicherung kümmern.</p>
    <p>Ein Bild wird etwa so kodiert:</p>
	<mod:inline runat="server" ID="ModInline1"
	Mode="high"
	Extension=".xml"
	Text=
'<div>
    <a href="/testfolder/.images/z_p_oh2.jpg">
        <img src="/testfolder/.images/z_t_oh2.jpg" alt="Geburtstagsfeier">
    </a>
</div>'
	>
	</mod:inline>
    wobei das Original-Bild <code>oh2.jpg</code>, das Miniaturbild <code>z_t_oh2.jpg</code> und das Vorschaubild <code>z_p_oh2.jpg</code> heißt. 
    Diese beiden zusätzlich hergestellten Bilder befinden sich in einem Ordner <code>.images</code>. 
    Dass sich das Bild in einem <code>div</code>-Abschnitt befindet, hat zur Folge, dass vor und nach dem Bild jedenfalls ein Zeilenumbruch stattfindet.
    <h2>Modul mod:image</h2>
    <p>Das Modul mod:image nimmt dem Benutzer die Vorgänge der Bildverkleinerung und Bildformatierung ab. Wird ein Bild mit diesem Modul angesprochen,</p>
    <ul>
        <li>legt das Modul einen Ordner <code>.images</code> an</li>
        <li>speichert dort die verkleinerten Versionen des Bildes mit dem Prefix <code>z_t_</code> und <code>z_p_</code> an</li>
        <li>generiert den Kode für das Bild und verwendet auf Wunsch auch den zusätzlichen Light-Box-Kode</li>
    </ul>
    <p>Das automatische Anlegen von Miniaturbild und Vorschaubild erfolgt aus Performancegründen nur beim ersten Aufruf. 
        Wenn man danach das Miniaturbild vergößern möchte, muss man vorher diese Bilder im angelegten Ordner <code>.images</code> löschen.</p>
    <h2>Anwendung</h2>
	<mod:inline runat="server" ID="Inline1"
	Mode="high"
	Extension=".xml"
	Text=    
'<mod:image ID="Image5" runat="server"
Cap="Einzelndes Bild oh2.jpg ohne Lightbox, Width=400"
Width="400"
PathToImage="/testfolder/"
Image="oh2.jpg"></mod:image>'
	>
	</mod:inline>
    <h2>Konfiguration</h2>
    <p>Man kann in der Konfigurationsdatei <code>web.config</code> folgende Parameter konfigurieren:</p>
	<mod:inline runat="server" ID="Inline2"
	Mode="high"
	Extension=".xml"
	Text=    
'<add key="Img_t" value="200"/>
<add key="Img_p" value="640"/>
<add key="Img_tp" value="z_t_"/>
<add key="Img_pp" value="z_p_"/>
<add key="Img_path" value=".images"/>'
	>
	</mod:inline>

</asp:Content>